<template>
  <div class="wrap">
    <Header :title="'医生列表'" />
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in list" :key="item.id" @click="onDetail(item.id)">
        <a href="javascript:;">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class="mui-ellipsis"><span>发表时间:{{item.add_time | dateFormat('YYYY-MM-DD')}}</span><span>点击:{{item.click}}次</span></p>
          </div>
        </a>
      </li>


    </ul>

    <Tabbar />

  </div>
</template>
<script>
  import Header from "../comments/header.vue";
  import Tabbar from "../comments/tabbar.vue";
  export default {
    data() {
      return {
        list: [{
            id: 1,
            title: "标题一",
            add_time: "2018-03-09 09:30:40",
            click: 10,
            img_url: "../../images/st12.png"
          },
          {
            id: 2,
            title: "标题二",
            add_time: "2017-04-09 09:30:40",
            click: 20,
            img_url: "../../images/56st.png"
          },
          {
            id: 3,
            title: "标题三",
            add_time: "2016-05-09 09:30:40",
            click: 30,
            img_url: "../../images/106st.png"
          }
        ]
      };
    },
    methods: {
      onDetail(id) {
        this.$router.push("/home/doctorDynamic/doctorDynamic-detail/" + id);
      }
    },
    components: {
      Header: Header,
      Tabbar: Tabbar
    }
  };
</script>
<style scoped>
  .wrap {
    height: 100%;
  }

  .mui-ellipsis {
    display: flex;
    justify-content: space-between;
    color: blue;
  }
</style>